<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>收银台</title>
</head>
<link rel="shortcut icon" href="__CDN__/assets/cashdesk/img/lon-icon.svg" type="image/x-icon" />
<link rel="stylesheet" href="__CDN__/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="__CDN__/assets/cashdesk/css/common.css?v=1.26">
<link rel="stylesheet" href="__CDN__/assets/cashdesk/js/layui/css/layui.css">
<script src="__CDN__/assets/libs/jquery/dist/jquery.min.js"></script>
<script src="__CDN__/assets/cashdesk/js/layui/layui.js"></script>
<script src="__CDN__/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="__CDN__/assets/libs/bootstrap/js/modal.js"></script>
<!-- <script src="__CDN__/assets/libs/fastadmin-layer/dist/layer.js"></script> -->
<script src="__CDN__/assets/cashdesk/js/common.js?v=1.26"></script>

<body>
    <div class="content">
        <div class="row content-left">
            <div class="col">
                <div class="row row-cols-2"><div class="content-logo"></div></div>
                <div class="row row-cols-2 btn-item" data-datatype="goods">
                    <div class="content-left-btn goods-btn"></div>
                    <p class="content-left-btn-title">商品</p>
                </div>
                <div class="row row-cols-2 btn-item" data-datatype="services">
                    <div class="content-left-btn service-btn"></div>
                    <p class="content-left-btn-title">服务</p>
                </div>
                <div class="row row-cols-2 btn-item" data-datatype="cards">
                    <div class="content-left-btn card-btn"></div>
                    <p class="content-left-btn-title">卡项</p>
                </div>
            </div>
        </div>
        <div class="row content-center">
            <!-- 搜索模块 -->
            <div class="row content-center-row">
                <div class="col-sm-5">
                    <input type="text" class="form-control search-word" id="search-word" value="" placeholder="请输入商品名称查询">
                </div>
                <div class="col-sm-2">
                    <button class="btn btn-danger mb-3 search-btn">搜索商品</button>
                </div>
                <div class="col-sm-4 btn-verification">
                    <button class="btn btn-danger mb-3 btn-write-off">核销</button>
                </div>
            </div>
            <!-- 商品列表模块 -->
            <div class="row goods-item">
                <div class="col-sm-2">
                    <div class="list-group"></div>
                </div>
                <div class="col-sm-10 goods-list-content"></div>
                <div>
                    <div class="page-content" style="">
                        <button class="page-prev-btn" data-page="1">上一页</button>
                        <span class="page-cur">1</span>/<span class="page-total">1</span>
                        <button class="page-next-btn" data-page="1">下一页</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="row content-right">
            <div class="row content-right-row">
                <label class="label label-btns label-btn col-sm-2 add-customer">新增客户</label>
                <label class="label label-btns label-btn col-sm-2 close-curorder">关闭本单</label>
                <label class="label label-btns label-btn col-sm-2 registration-curorder">挂单本单</label>
                <label class="label label-btns label-btn col-sm-2 show-my-card" style="width:80px">查看会员卡项</label>
                <label class="label label-btns label-btn col-sm-6 label-btn-registration">挂单<span class="notification-count">0</span></label>
            </div>
            <div class="label-choose-user">
                <label class="label label-btns label-choose-btn">+</label>
                <label class="label label-btns label-choose-title">点击选择客户</label>
            </div>
            <div class="row content-right-row content-right-car">
                <label class="label label-btn-car col-sm-2">商品数量</label>
                <label class="label label-btn-car label-btn-addgift col-sm-2">添加赠送</label>
                <label class="label label-btns label-btn-car col-sm-6 label-btn-clear-all">清空</label>
            </div>

            <div class="row cart-list"></div>
            <div class="order-detail">
                <div class="row">
                    <div class="col-xs-8">待收款：<span class="ordertotalfee">￥0</span></div>
                    <div class="col-xs-4" style="text-align:right">会员优惠价：<span class="orderdiscountfee">￥0</span></div>
                </div>
                <div class="row">
                    <div class="col-xs-6"><button class="btn btn-danger btn-operate-order change-price col-xs-10">改价</button></div>
                    <div class="col-xs-6"><button class="btn btn-danger btn-operate-order pay-order col-xs-10">收款</button></div>
                </div>
            
            </div>
        </div>
    </div>

    <!-- 图片预览 -->
    <div class="modal fade" id="imgModal" tabindex="-1" role="dialog" aria-labelledby="imgModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="imgModalLabel">图片预览</h4>
                </div>
                <div class="modal-body">
                    <img src="" id="img-responsive" class="img-responsive" style="margin: auto;height: 700px;">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加商品 -->
    <div class="modal fade" id="addGoodsModal" tabindex="-1" role="dialog" aria-labelledby="addGoodsLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="addGoodsLabel">选择规格</h4>
                </div>
                <div class="modal-body">
                    <div class="goods-add-body">
                    </div>
                </div>
                <div class="modal-footer model-confirm">
                    <button type="button" class="btn btn-danger btn-confirm-info">确认选择</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 新增客户 -->
    <div class="modal fade" id="addUserModal" tabindex="-1" role="dialog" aria-labelledby="addUserLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="addUserLabel">新增客户</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <div class="row">
                            <div class="col-xs-2 add-customer-div">
                                <label for="c-mobile" class="control-label add-customer-label add-customer-mobile-title"><i style="color:red">*</i> 手机号</label>
                            </div>
                            <div class="col-xs-10">
                                <input id="c-mobile" class="form-control mobile-text" type="text" value="" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-2 add-customer-div">
                                <label for="c-nickname" class="control-label add-customer-label add-customer-nickname-title">姓名</label>
                            </div>
                            <div class="col-xs-10">
                                <input id="c-nickname" class="form-control nickname-text" type="text" value="">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-2 add-customer-div">
                                <label for="c-gender" class="control-label add-customer-label add-customer-gender-title">性别</label>
                            </div>
                            <div class="col-xs-10">
                                <div class="radio radio-custom">
                                    <input class="radio-gender" id="row[gender]-1" checked="checked" name="gender" type="radio" value="1" checked><label class="gender-label" for="row[gender]-1"> 男 </label>   
                                    <input class="radio-gender" id="row[gender]-0" name="gender" type="radio" value="0"> <label class="gender-label" for="row[gender]-0"> 女</label> 
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer model-confirm">
                        <button type="button" class="btn btn-danger btn-save-customer">确认选择</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 选择会员 -->
    <div class="modal fade" id="chooseUserModal" tabindex="-1" role="dialog" aria-labelledby="chooseUserLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="chooseUserLabel">选择会员</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <div class="row">
                            <div class="col-xs-2 add-customer-div">
                                <label for="c-mobile" class="control-label add-customer-label add-customer-mobile-title"><i style="color:red">*</i> 手机号</label>
                            </div>
                            <div class="col-xs-10">
                                <input id="choose-mobile" class="form-control choose-mobile-text" type="text" value="" required>
                                <button type="button" id="btn-search" class="btn btn-danger btn-search">搜索</button>
                            </div>
                        </div>
                    </div>
                    <div class="row col-xs-12 user-list"></div>
                    <div class="modal-footer model-confirm">
                        <!-- <button type="button" class="btn btn-danger btn-choose-customer">确认选择</button> -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 改价 -->
    <div class="modal fade" id="changePriceModal" tabindex="-1" role="dialog" aria-labelledby="changePriceLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="changePriceLabel">改价</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <div class="row">
                            <div class="col-xs-2 add-customer-div">
                                <label class="control-label">原价(￥)：</label>
                            </div>
                            <div class="col-xs-10">
                                <span class="goodsprice">0</span>
                                <input type="hidden" class="change_price_specid" value="0">
                            </div>
                        </div>
                        <div class="row" style="margin-top: 10px;">
                            <div class="col-xs-2 add-customer-div">
                                <label for="c-price" class="control-label add-customer-label add-customer-mobile-title"><i style="color:red">*</i> 议价(￥)</label>
                            </div>
                            <div class="col-xs-10">
                                <input id="c-price" class="form-control change-price-text" type="number" value="0.00" min="0" required>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer model-confirm">
                        <button type="button" class="btn btn-danger btn-change-price">确认修改</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 选择服务人员 -->
    <div class="modal fade" id="chooseServerModal" tabindex="-1" role="dialog" aria-labelledby="chooseServerLabel">
        <div class="modal-dialog modal-sm">
            <div class="modal-content" style="width: 520px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="chooseServerLabel">选择销售人员</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group" style="width: 500px;overflow-y: auto;overflow-x: hidden;height: 500px;">
                        <div class="row server-item-list">
                            <!-- 服务人员列表 -->
                        </div>
                    </div>
                    <div class="modal-footer model-confirm">
                        <button type="button" class="btn btn-danger btn-choose-server">确认选择</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 挂单列表 -->
    <div class="modal fade" id="orderListModal" tabindex="-1" role="dialog" aria-labelledby="orderListLabel">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="orderListLabel" style="text-align: center;">挂单列表</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group order-items">
                        <!-- 挂单列表 -->
                    </div>
                </div>
            </div>
        </div>
    </div>

     <!-- 会员耗卡列表 -->
    <div class="modal fade" id="userCardListModal" tabindex="-1" role="dialog" aria-labelledby="userCardListLabel">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="userCardListLabel" style="text-align: center;">会员耗卡列表</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group user-card-item-list">
                        <!-- 会员耗卡列表 -->
                        
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 权益卡列表 -->
    <div class="modal fade" id="myCardListModal" tabindex="-1" role="dialog" aria-labelledby="myCardListLabel">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myCardListLabel" style="text-align: center;">次卡列表</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group card-list-item">
                        <div class="row warning-info-div card-common">
                            <span class="warning-info"><img src="__CDN__/assets/cashdesk/img/warning_icon.svg" class="warning-img">仅显示本账单可用次卡</span>
                        </div>
                        <!-- 权益卡列表 -->
                        <div class="row card-item-list" style="height: 500px;overflow: auto;scrollbar-width: thin">
                        </div>
                    </div>
                    <div class="modal-footer model-confirm">
                        <button type="button" class="btn btn-danger btn-choose-cards" data-specid="0" data-userid="0">确认选择</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 改价(更改订单总金额) -->
    <div class="modal fade" id="changeOrderPriceModal" tabindex="-1" role="dialog" aria-labelledby="changeOrderPriceLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="changeOrderPriceLabel">更改订单总金额</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <div class="row">
                            <div class="col-xs-3 add-customer-div" style="text-align:center;">
                                <label class="control-label">原来的金额(￥)：</label>
                            </div>
                            <div class="col-xs-8">
                                <span class="oldorderfee">0</span>
                                <input type="hidden" class="change_orderno" value="">
                            </div>
                        </div>
                        <div class="row" style="margin-top: 10px;">
                            <div class="col-xs-3 add-customer-div" style="text-align:center;">
                                <label for="c-price" class="control-label add-customer-label add-customer-mobile-title"><i style="color:red">*</i> 更改金额(￥)</label>
                            </div>
                            <div class="col-xs-8">
                                <input id="c-price" class="form-control change-orderfee-text" type="number" value="0.00" min="0" required>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer model-confirm">
                        <button type="button" class="btn btn-danger btn-change-orderfee">确认修改</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 订单赠送权益 -->
    <div class="modal fade" id="addGiveModal" tabindex="-1" role="dialog" aria-labelledby="addGiveModalLabel" >
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header modal-givegift-div">
                    <h5 class="modal-title" id="addGiveModalLabel">添加赠送</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="nav-item active" data-type='1'>
                            <a class="nav-link active" id="product-tab" data-toggle="tab" href="#product" role="tab" aria-controls="product" aria-selected="false">产品</a>
                        </li>
                        <li class="nav-item" data-type='2'>
                            <a class="nav-link" id="service-tab" data-toggle="tab" href="#service" role="tab" aria-controls="service" aria-selected="true">服务</a>
                        </li>
                        <li class="nav-item" data-type='3'>
                            <a class="nav-link" id="coupon-tab" data-toggle="tab" href="#coupon" role="tab" aria-controls="coupon" aria-selected="false">优惠券</a>
                        </li>
                    </ul>
                    <div class="tab-content modal-givegift-content">
                        <div class="tab-pane fade show active in" id="service" role="tabpanel" aria-labelledby="service-tab">
                            <!-- 服务列表展示区域 -->
                            <div class="form-group">
                                <div class="input-group search-div">
                                    <div class="input-group-prepend">
                                        <select class="custom-select form-control selectpage" id="service-category">
                                            <option value="">所有分类</option>
                                        </select>
                                    </div>
                                    <div class="input-group-prepend">
                                        <input type="text" class="form-control input" placeholder="输入名称" id="service-search">
                                    </div>
                                    <div class="input-group-append" style="display: inline;">
                                        <button class="btn btn-danger" type="button" id="gift-search-btn">搜索</button>
                                    </div>
                                </div>
                            </div>
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th><input type="checkbox" id="select-all-service"></th>
                                        <th>赠品</th>
                                        <th>售价(元)</th>
                                        <th>数量</th>
                                        <th>创建时间</th>
                                    </tr>
                                </thead>
                                <tbody id="service-list">
                                </tbody>
                            </table>
                            <div class="mt-3">
                                <ul class="pagination justify-content-center mb-0" id="service-pagination"></ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="confirm-add-give">确认</button>
                    <button type="button" class="btn btn-danger" id="clear-gift-btn">清除已选</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>